<template>
  <div class="about">
    <h1>{{this.$store.state.name}}</h1>
    <h1>{{name}}</h1>
    <h1>大写:{{this.$store.getters['aboutOption/upperCaseName']}}</h1>
    <h1>大写(mapGetters):{{upperCaseName}}</h1>
    <hr />
    <!-- <h2 style="color: orange;">{{count}}</h2> -->
    <button @click="editNameA('lisi')">修改name(mapActions)</button>
    <button @click="editNameM('wangwu')">修改name(mapMutations)</button>
  </div>
</template>
<script>
  import {
    mapState,
    mapGetters,
    mapActions,
    mapMutations
  } from 'vuex'
  export default {
    computed: {
      name() {
        return this.$store.state.aboutOption.name
      },
      // ...mapState({name:'name'}),
      // ...mapState('aboutOption', ['name']),
      // ...mapState('homeOption', ['count']),
      upperCaseName() {
        return this.$store.getters['aboutOption/upperCaseName']
      }
      // ...mapGetters('aboutOption', ['upperCaseName'])
    },
    methods: {
      editNameA() {
        this.$store.dispatch("aboutOption/editNameA", "lisi")
      },
      editNameM() {
        this.$store.commit("aboutOption/editNameM", "wangwu")
      }
      // ...mapActions('aboutOption', ['editNameA']),
      // ...mapMutations('aboutOption', ['editNameM'])
    }
  }
</script>
